<!--动作 计数器 -->
<template>
  <el-dialog
    title="提示"
    v-model="dialogVisible"
    style="width: 40%; height: 100%; float: right; margin: 0"
    :close-on-click-modal="false"
    :showClose="false"
    :before-close="Cancel"
  >
    <!-- 头部 -->
    <template #title>
      <!-- 这里添加您希望在左上角放置的内容，例如关闭按钮 -->
      <span>
        <i class="el-icon-close" @click="dialogVisible = false" style="cursor: pointer"></i>
      </span>
      <span> 添加计数器执行 </span>
    </template>
    <el-form label-position="top">
      <!-- 上面两行input -->
      <div style="display: flex">
        <!-- 设备选择 -->
        <el-form-item label="设备选择" style="display: inline-block; flex: 1">
          <el-select
            v-model="SelectDevice"
            placeholder="请选择"
            style="width: 100%"
            @change="DeviceChange"
          >
            <el-option
              v-for="item in AxiosOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="选择动作">
        <el-col v-for="(item, index) in executions" :key="index">
          <!-- {{ item }} -->
          <div
            v-if="item.type == 'write' || item.type == 'both'"
            style="display: flex; justify-content: center; align-items: center; margin: 10px"
          >
            <!-- 执行条件的文字显示 -->
            <span style="flex: 1; text-align: center">{{ item.propertyName }}</span>
            <span style="flex: 1; text-align: center">
              <el-select
                v-model="item.checkValue"
                placeholder="请选择"
                v-if="item.renderModel === 'select'"
              >
                <el-option
                  v-for="item in AutoRendermod1[item.rendermod1]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
              <el-select v-model="item.statusType" placeholder="请选择" v-else>
                <el-option
                  v-for="item in AutoRendermod2[item.rendermod2]"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </span>
            <span style="flex: 1; text-align: center">
              <span style="margin-left: 10%">
                <el-select
                  v-model="item.statusValue"
                  placeholder="请选择"
                  v-if="item.renderModel === 'select'"
                >
                  <el-option
                    v-for="item in AutoRendermod2[item.rendermod2]"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
                <el-input v-else v-model="item.statusValue" placeholder="请输入"></el-input>
              </span>
            </span>

            <span style="flex: 1; text-align: center">
              <el-link @click="DeleteFilled(index, 1)" :underline="false" style="margin-left: 5%"
                ><el-icon><DeleteFilled /></el-icon
              ></el-link>
            </span>
          </div>
        </el-col>
        <!-- <div>定时器使用示例：延时30秒为（00:00:30），延时一个小时为（01:00:00）</div> -->
      </el-form-item>
    </el-form>

    <!-- 底部 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteActions">删除</el-button>
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        <!-- <el-button @click="loginaa">显示设备</el-button> -->
      </span>
    </template>
  </el-dialog>
</template>
  
  <script>
import { ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import AutoRendermod2JSON from '../../../MyJson/AutoRendermod2.json'
import AutoRendermod1JSON from '../../../MyJson/AutoRendermod1.json'
import until from '../../../until/csUntil/deviceUtils'
import { ElMessage } from 'element-plus'
import { ElTimePicker } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'

export default {
  setup(_, { emit }) {
    //
    const timeR = ref('00:00:00')
    const AutoRendermod1 = ref(AutoRendermod1JSON.template)
    // 导入 自动化模板2
    const AutoRendermod2 = ref(AutoRendermod2JSON.template)
    // dialog的关闭显示
    const dialogVisible = ref(false)
    //  select  选择设备的值
    const SelectDevice = ref('')
    // vuex导入
    const store = useStore()
    // 假数据
    const AxiosOptions = ref(null)
    // vuex 导入 设备
    const device = ref(store.state.beforeAllDevice)
    // vuex 设备类型
    const deviceTypeStr = ref(store.state.deviceTypeStr)
    // 动作
    const executions = ref([])

    // 设备id
    const id = ref(null)
    // 设备名称
    const deviceName = ref(null)
    const TimeSelect = ref([
      { name: '常量', value: '常量' },
      { name: '变量', value: '变量' }
    ])
    const showDelete = ref(false)

    const checeout = ref(null)
    //
    //
    //
    //
    //
    //
    //
    //
    // 打开dialog
    const openmyDialog = () => {
      dialogVisible.value = true
    }

    const closeTime = () => {}
    // 选中设备的值
    const DeviceChange = (event) => {
      executions.value = []
      id.value = event
      const res = AxiosOptions.value.find((item) => item.id === event)
      if (res) {
        deviceName.value = res.name
        const result = JSON.parse(JSON.stringify(res))
        executions.value = result.property
      }
    }
    // 删除
    const DeleteFilled = (index) => {
      executions.value.splice(index, 1)
    }
    // 确定后输出表单
    const submit = () => {
      const uuid = uuidv4()
      let result = []
      executions.value.map((item) => {
        if (item.statusValue) {
          let res = {
            id: uuid,
            executionType: 'AUTO_SCHED_EXECUTION_TYPE_DEVICE',
            deviceId: id.value,
            statusName: item.statusName,
            statusType: item.statusType,
            statusValue: item.statusValue,
            checkValue: item.checkValue,
            deviceName: deviceName.value,
            rendermod1: item.rendermod1,
            rendermod2: item.rendermod2,
            type: item.type,
            renderModel: item.renderModel,
            name: item.propertyName,
            statusName: item.propertyName,
            propertyName: item.propertyName,
            Change: 'ActionCounters'
          }
          result.push(res)
        }
      })
      if (result.length) {
        // console.log(result)
        emit('executions', result)
        Cancel()
      } else {
        ElMessage.error('请选择设备')
      }
    }
    // 取消
    const Cancel = () => {
      SelectDevice.value = ''
      executions.value = []
      dialogVisible.value = false
      showDelete.value = false
      checeout.value = null
    }

    // 测试
    const loginaa = () => {}
    onMounted(() => {
      // AxiosOptions.value = JSON.parse(JSON.stringify(res))
      // store.state.beforeAllDevice
    })

    const filterList = (data) => {
      dialogVisible.value = true
      const dds = []
      data.map((item) => {
        item.map((event) => {
          dds.push(event.deviceName)
        })
      })

      const listDvcAndDvcVer = window.api.listDvcAndDvcVer()

      const MyfilterList = JSON.parse(listDvcAndDvcVer)

      const res = MyfilterList.filter(
        (item) => item.isVirtual === 'IS_VIRTUAL' && item.DevicetypeValue === 1004
      )

      if (res) {
        const result = JSON.parse(JSON.stringify(res))

        // result.forEach((item) => {
        //   if (dds.includes(item.name)) {
        //     item.disabled = true
        //   }
        // })

        AxiosOptions.value = result
      }
    }

    // 删除
    const DeleteActions = () => {
      emit('DeleteActions')
      Cancel()
    }
    return {
      showDelete,
      AutoRendermod1,
      AutoRendermod2,
      deviceTypeStr,
      executions,
      dialogVisible,
      SelectDevice,
      AxiosOptions,
      device,
      id,
      deviceName,
      TimeSelect,
      checeout,
      closeTime,
      filterList,
      openmyDialog,
      submit,
      DeviceChange,
      DeleteFilled,
      Cancel,
      loginaa,
      DeleteActions
    }
  }
}
</script>
  
  <style lang="less" scoped>
.myCascader {
  display: flex;
}
::v-deep .el-popper {
  width: 500px;
}
</style>
  